<template>
  <div>
    <Navbar></Navbar>
    <div v-if="data.data.a">
      <div id="publish" v-if='data1.length'>
        <select name="" id="name" v-model="select">
          <option v-for="d in data1">{{d}}</option>
        </select>
        <br>
        <br>
        <input type="text" v-model="title">
        <br>
        <br>
        <textarea id="introduce" v-model="content"></textarea>
        <br>
        <br>
        <a @click="btn" class="yangshi">发表</a>
      </div>
    </div>
    <div v-if="!data.data.a">
      <router-link class="asd" to="/regist">注册</router-link>
    </div>
    
  </div>
</template>

<script>
  import Navbar from "../components/Navbar.vue"
  import {mapState} from "vuex";
  export default {
    data:function(){
      return {
        select:"选择话题小组......",
        title:"",
        content:"",
      }
    },
    components: { Navbar },
    computed:{
      ...mapState([
        "data1",
        "data"
      ])
    },
    methods:{
      btn(){
        // console.dir(this.select)
        if(this.select.indexOf("选择话题小组......")>-1){
          alert("选择话题")
          return;
        }else if(this.title.length<0){
          alert("请输入标题");
          return;
        }else if(this.content.length<0){
          alert("请输入内容")
          return;
        }else{
          var data = {
            name:this.select,
            title:this.title,
            content:this.content
          }
          this.$store.dispatch("publish",data);
        } 
      }
    },
    mounted: function(){
      this.$store.dispatch("request");
      this.$store.dispatch("updata");
    },
    
  }

</script>

<style scoped>
  .yangshi{
    display: inline-block;
    width: 80px;
    height: 35px;
    background-color:#E24C7C;
    color: white;
    border-radius: 3px;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
  }
  a{
    text-decoration: none;
  }
  input{
    width: 95%;
    height: 30px;
  }
  textarea{
    width: 95%;
    height: 117px;
  }
  #publish{
    padding-left: 10px;
    padding-top: 28px;
  }
  #name{
    display: inline-block;
    width: 95%;
    height: 30px;
  }
  .asd {
    margin-left: 12px;
    margin-right: 12px;
    font-size: 15px;
    text-decoration: none;
  }
</style>